<template>
  <m-page>
    <!-- 融易通卡设置密码页 -->
    <m-header title="融易通卡设置密码"></m-header>

    <div class="password_setup">
      <ynet-input-item ref="input0" title="融易通卡号" value="6214 **** **** 1234" readonly></ynet-input-item>
      <ynet-input-item
        ref="input1"
        title="CVV2"
        placeholder="请输入卡片背面签名栏末尾三位数"
        is-amount
        v-model="formdata.cvv2"
      ></ynet-input-item>
      <ynet-input-item
        ref="input2"
        title="预留手机号"
        type="phone"
        placeholder="请输入您的手机号码"
        is-amount
        v-model="formdata.tel"
      ></ynet-input-item>

      <!-- 短信验证码 -->
      <ynet-input-item
        title="验证码"
        ref="myInputItem"
        placeholder="请输入验证码"
        clearable
        v-model="formdata.checkCode"
      >
        <template v-slot:right>
          <div class="md-message-code-get">
            <p v-show="!starting" @click="$_onStart">获取验证码</p>
            <p v-show="starting">
              <span>{{localTime | formatTime}}</span>秒后再获取
            </p>
          </div>
        </template>
      </ynet-input-item>

      <ynet-input-item
        ref="input3"
        title="新密码"
        type="password"
        placeholder="请输入新密码"
        is-amount
        v-model="formdata.pwd"
      ></ynet-input-item>
       <ynet-input-item
        ref="input4"
        title="确认新密码"
        type="password"
        placeholder="请再次输入新密码"
        is-amount
        v-model="formdata.check_pwd"
      ></ynet-input-item>
      
      <!-- 验证码提示信息 -->
       <div style="position:relative;">
        <div
          class="md-message-code-brief"
          v-show="starting && !localError"
        >验证码已发送至{{this.formdata.tel}},3分钟内有效</div>
        <div class="md-message-code-error">{{localError}}</div>
      </div>
    </div>
    <ynet-button type="warning" @click="handclick">提交</ynet-button>
  </m-page>
</template>

<script>
import { InputItem ,Button} from "ynet-mobile";
export default {
  components: {
    [InputItem.name]: InputItem,
    [Button.name]:Button
  },
  data() {
    return {
      formdata: {
        cvv2: "",
        tel: "",
        checkCode: "",
        pwd: "",
        check_pwd: ""
      },
      starting: false, //获取验证码文字显示
      localTime: 30, //获取验证码倒计时
      localError: "" //验证码错误信息
    };
  },
  filters: {
    formatTime(t) {
      return t < 10 ? `0${t}` : t;
    }
  },
  created() {},
  mounted() {},
  methods: {
    //页面跳转
    goto(item, params) {
      let url = `smallbusinessloan/rong_yi_tong_card/${item}`
      app.api.pushWindow( url ,params )
    },
    //获取验证码
    $_onStart() {
      if (this.starting) return;
      this.starting = true;
      this.$_onCountDown();

      //这里是模拟rpc发请求到后台申请下发验证码，需改造
      setTimeout(() => {
        let createRandom = () =>
          String(Math.floor(Math.random() * (999999 - 100000 + 1) + 100000));
        this.localCode = createRandom();
      }, 2500);
    },
    // 验证码获取倒计时
    $_onCountDown() {
      this.timer = setInterval(() => {
        if (this.localTime <= 0) {
          this.$_onStop();
        } else {
          this.localTime = this.localTime - 1;
        }
      }, 1000);
    },
    $_onStop() {
      clearInterval(this.timer);
      this.localTime = this.time;
      this.starting = false;
    },

    //提交按钮
    handclick(){
       if (this.formdata.pwd !== this.formdata.check_pwd) {
        app.api.showToast("两次密码不匹配，请重新输入！");
      } else if (this.formdata.pwd == this.formdata.check_pwd) {
        this.goto("home_card_information.html");
      }
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

